<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
		    <table>
		      <tr>
		        <td>姓名：</td>
		        <td>
		          <input type="text" v-model="name">
		        </td>
		      </tr>
		      <tr>
		        <td>性别：</td>
		        <td>
		          <label for="man">
		            <input type="radio" name="sex" id="man" value="man" v-model="sex">男
		          </label>
		          <label for="woman">
		            <input type="radio" name="sex" id="woman" value="woman" v-model="sex">女
		          </label>
		        </td>
		      </tr>
		      <tr>
		        <td>爱好：</td>
		        <td>
		
		          <input type="checkbox" name="" id="" value="唱歌" v-model="lover">
		          唱歌</label>
		
		          <input type="checkbox" name="" id="" value="跳舞" v-model="lover">
		          跳舞 </label>
		
		          <input type="checkbox" name="" id="" value="篮球" v-model="lover">
		          篮球 </label>
		        </td>
		      </tr>
		      <tr>
		        <td>职业：</td>
		        <td>
		          <select name="" id="" multiple v-model="profession">
		            <option value="老板">老板</option>
		            <option value="软件工程师">软件工程师</option>
		            <option value="教师">教师</option>
		          </select>
		        </td>
		      </tr>
		      <tr>
		        <td>个人简介：</td>
		        <td>
		          <textarea name="" id="" v-model="info" cols="30" rows="10"></textarea>
		        </td>
		      </tr>
		      <tr>
		        <td>城市：</td>
		        <td>
		          <select v-model="city"  >
					<option value="" hidden selected disabled>请选择城市</option> 
		            <option value="北京">北京</option>
		            <option value="厦门">厦门</option>
		            <option value="福州">福州</option>
					<option value="龙岩">龙岩</option>
		          </select>
		        </td>
		      </tr>
		      <tr>
		        <td colspan="2">
		          <label for="agr">
		            <input type="checkbox" name="" v-model="isAgree" id="agr">
		            同意
		          </label>
		          <button :disabled="!isAgree" @click="allInfo='true'">提交</button>
		        </td>
		      </tr>
		    </table>
		    <div v-show="allInfo">
		      <h2>您的个人信息是：用户名：{{name}} 性别：{{sex}} 爱好：{{lover}} 职业：{{profession}} 个人简介：{{info}}  城市：{{city}}</h2>
		    </div>
		  </div>
	</body>
	<script>
	  new Vue({
	    el: '#app',
	    data () {
	      return {
	        name: '',
	        sex: 'man',
	        lover: [],
	        profession: [],
	        info: '',
	        city: '',
	        isAgree: false,
	        allInfo: false
	      }
	    }
	  })
	
	</script>
</html>